<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length === 0" @click="batchDel"></el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.keyword" placeholder="部门名称" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upSearch"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <ScTable ref="table" :apiObj="departmentApi.list" row-key="id" @selection-change="selectionChange" hidePagination default-expand-all>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="部门名称" prop="name" width="250"></el-table-column>
<!--                <el-table-column label="状态" prop="status" width="150">-->
<!--                    <template #default="scope">-->
<!--                        <el-tag v-if="scope.row.status==1" type="success">启用</el-tag>-->
<!--                        <el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="创建时间" prop="create_time" width="150">
                    <template #default="{row,$index}">
                        <span>{{$TOOL.dateFormat((row.create_time)*1000)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" min-width="300"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="170">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="tableEdit(scope.row)">编辑</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row)">
                                <template #reference>
                                    <el-button type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>

            </ScTable>
        </el-main>
    </el-container>

    <SaveDialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"/>

</template>

<script setup name="department">
import SaveDialog from './save'
import departmentApi from '@/api/company/department'
import ScTable from "@/components/scTable/index.vue"
import {getCurrentInstance, nextTick, ref} from "vue"

const {proxy} = getCurrentInstance()

const dialog = ref({
    save: false
})

const saveDialog = ref(null)
const table = ref(null)

const selection = ref([])
const search = ref({
    keyword: ''
})

const add = () => {
    dialog.value.save = true
    nextTick(() => {
        saveDialog.value.open()
    })
}

const tableEdit = (row) => {
    dialog.value.save = true
    nextTick(() => {
        saveDialog.value.open('edit')
        saveDialog.value.setData(row)
    })
}

const tableDel = async (row) => {
    const res = await departmentApi.delete.post({ids: row.id})
    if(res.code === 0){
        table.value.refresh()
        proxy.$message.success("删除成功")
    }else{
        await proxy.$alert(res.message, "提示", {type: 'error'})
    }
}

//表格选择后回调事件
const selectionChange = (selection) => {
    selection.value = selection;
}

//批量删除
const batchDel = async () => {
    proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
        type: 'warning'
    }).then(() => {
        const loading = proxy.$loading();
        table.value.refresh()
        loading.close();
        proxy.$message.success("操作成功")
    }).catch(() => {

    })
}

const upSearch = () => {
    table.value.upData(search.value)
}

const handleSaveSuccess = (data, mode) => {
    if(mode === 'add'){
        table.value.refresh()
    }else if(mode === 'edit'){
        table.value.refresh()
    }
}

</script>
